<template>
	<y-popup ref="aiPopup" mode="bottom" z-index="300" round="12">
		<view class="p-16 text-black">
			<view class="text-center fs-20 fw-600 ">AI提示词优化</view>
			<view class="mt-22">
				<view class="flex gap-2 flex-y-center">
					<text class="iconfont icon-AIwenan"></text>
					<text class="fw-500">选择优化风格</text>
				</view>
				<view class="flex gap-8 mt-14 text-white">
					<view v-for="(item, index) in list" :key="item.value"
						class="round-8 flex-1 py-14 flex flex-center flex-column"
						:class="select === item.value ? 'gradient text-white' : 'bg-grey-3 text-333'"
						@click="select=item.value">
						<text :class="`iconfont fs-40  ${item.icon}`"></text>
						<view class="fs-14 mt-9">{{ item.name }}</view>
						<view class="fs-12 mt-4" :class="select === item.value ? '' : 'text-666'">
							{{ item.desc }}
						</view>
					</view>

				</view>
			</view>
			<view class="py-12" v-if="text!=''">
				<view class="flex flex-x-space-between">
					<text>优化后的描述词</text>
					<view class="flex flex-y-center gap-6">
						<view class="bg-grey-3 py-5 px-8 fs-14 round-30" @click="$tool.copy(text)">
							<text class="iconfont icon-fuzhi"></text>
							复制
						</view>
						<view class="bg-grey-3 py-5 px-8 fs-14 round-30" @click="use">
							<text class="iconfont icon-shiyong"></text>
							使用
						</view>
					</view>
				</view>
				<view class="bg-grey-1 p-12 round-12 mt-12 fs-14 overflow-y-auto" style="max-height: 200px;">
					<mp-html :content="text"></mp-html>
				</view>
			</view>

			<view class="py-12 text-brown-2 fs-12">
				*AI会根据你选择的风格，将你的提示词扩展得更加生动
			</view>
			<view class="grid-columns-2  gap-14 text-center fs-18">
				<view class="bg-grey-3 round-8 py-14 text-333" @click="aiPopup.close()">
					取消
				</view>
				<view class="gradient round-8 py-14 text-white" @click="onRefine">
					{{text==''?'立即优化':'重新生成'}}
				</view>
			</view>
		</view>
		<view @click="aiPopup.close()"
			class=" w-30 h-30 text-grey-1 round-circle flex flex-center absolute right-10 top-18"
			style="background: rgba(116,116,128,0.08);;">
			<text class="iconfont icon-guanbi text-333 fs-14 fw-600"></text>
		</view>
	</y-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import { $http, $tool } from '@/utils';
	const props = defineProps({
		prompt: {
			default: '',
			type: String
		},
		duration: {
			type: Number,
			default: 0
		}
	})
	const text = ref('')
	const aiPopup = ref(null)
	const list = [
		{ name: '脚本风格', desc: '分镜脚本', value: 1, icon: 'icon-jiaoben-gaoliang' },
		{ name: '专业风格', desc: '专业、规范', value: 2, icon: 'icon-zhuanye-gaoliang' },
		{ name: '创意风格', desc: '富有表现力', value: 3, icon: 'icon-chuangyi-gaoliang' },
		{ name: '简洁风格', desc: '简洁、准确', value: 4, icon: 'icon-jianjie-gaoliang' },
	];
	const select = ref(1)
	const open = () => {
		aiPopup.value.open();
	}
	const emit = defineEmits(['success'])
	const onRefine = () => {
		if (props.prompt == '') {
			return $tool.toast('请输入要优化的提示词');
		}
		const name = list.find(map => map.value === select.value)?.name || '';
		uni.showLoading({
			title: '优化中...',
			mask: true
		})
		$http.post('Generate/refinePrompt', { ...props, style: name }).then(res => {
			text.value = res.data.prompt
		})
	}
	const use = () => {
		emit('success', text.value);
		aiPopup.value.close()
	}
	defineExpose({ open })
</script>

<style>
	.fs-40 {
		font-size: 80rpx;
	}

	.gradient {
		transition: all 0.25s ease;
	}
</style>